<template>
	<view class="success" v-if="status">
		<rui-icons icon="success" color="var(--color)" size="100"></rui-icons>
		<view class="success_name">
			设备绑定成功
		</view>
	</view>
	<view class="container" v-else>
		<view class="container_device">
			<image :src="info.image" class="container_device_image" mode=""></image>
		</view>
		<view class="container_form">
			<input class="container_form_input" placeholder="请输入设备新名称" v-model="form.name" />
		</view>
		<rui-button text="绑定设备" @click="submit"></rui-button>
	</view>

</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import cache from "@/util/cache";
	import {
		addDevices
	} from "@/common/api.js"


	let status = ref(false)
	let info = ref({})
	let form = ref({
		name: ""
	})

	onLoad(opts => {
		info.value = cache.get('DevicesInfo')
	})

	onUnload(() => {
		cache.remove('DevicesInfo')
	})


	const submit = () => {
		if (!form.value.name) {
			uni.$rui.toast("请输入设备新名称")
			return false;
		}

		let data = {
			devices_id: info.value.id,
			name: form.value.name,
			mac: info.value.mac
		}
		console.log('--------', data)
		
		addDevices(data).then(res => {
			status.value = true;
			setTimeout(_ => {
				uni.navigateBack({
					delta: 2
				})
			}, 2000)
		})

	
	}
</script>

<style lang="scss" scoped>

	.success {
		margin-top: 25%;
		text-align: center;
		&_name {
			margin-top: 20rpx;
		}
	}

	.container {
		&_device {
			text-align: center;
			margin-top: 100rpx;

			&_image {
				height: 300rpx;
				width: 300rpx;
				border-radius: 20rpx;

			}
		}

		&_form {
			margin: 100rpx 30rpx 50rpx;

			&_input {
				// border-bottom: 1rpx solid #ddd;
				padding: 30rpx 0;
				font-size: 32rpx;
				text-align: center;
				background: #fff;
				border-radius: 20rpx;
			}
		}
	}
</style>